<template>
  <div>
    <div class="mt-2 rounded-lg">
      <v-carousel
          cycle
          :show-arrows="false"
          :hide-delimiter-background="true"
          width="100%" height="100%"
          class="text-white"
      >
        <v-carousel-item>
          <v-img src="https://upload.fireflyau.com/pte/banner/i/4094f3beecdf7a257a6dfe324b24a4f7.png"></v-img>
        </v-carousel-item>
        <v-carousel-item>
          <v-img src="https://upload.fireflyau.com/pte/banner/i/248f3f750aae779cdaf159a3574f0fc7.png"></v-img>
        </v-carousel-item>

      </v-carousel>

    </div>
    <div>
      <v-container class="fill-height">
        <v-responsive class="align-center text-center fill-height">
          <v-img height="300" src="@/assets/logo.svg" />
          <h1 class="text-h2 font-weight-bold">Vuetify</h1>

          <div class="py-14" />

          <v-row class="d-flex align-center justify-center">
            <v-col cols="auto">
              <v-btn
                  href="https://vuetifyjs.com/components/all/"
                  min-width="164"
                  rel="noopener noreferrer"
                  target="_blank"
                  variant="text"
              >
                <v-icon
                    icon="mdi-view-dashboard"
                    size="large"
                    start
                />

                Components
              </v-btn>
            </v-col>

            <v-col cols="auto">
              <v-btn
                  color="primary"
                  href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
                  min-width="228"
                  rel="noopener noreferrer"
                  size="x-large"
                  target="_blank"
                  variant="flat"
              >
                <v-icon
                    icon="mdi-speedometer"
                    size="large"
                    start
                />

                Get Started
              </v-btn>
            </v-col>

            <v-col cols="auto">
              <v-btn
                  href="https://community.vuetifyjs.com/"
                  min-width="164"
                  rel="noopener noreferrer"
                  target="_blank"
                  variant="text"
              >
                <v-icon
                    icon="mdi-account-group"
                    size="large"
                    start
                />

                Community
              </v-btn>
            </v-col>
          </v-row>
        </v-responsive>
      </v-container>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {onMounted,ref} from 'vue';
const router = useRouter();

</script>

<style scoped lang="scss">

</style>
